<template>
  <div class='user-tabs'>
    <el-tabs type="border-card">
      <el-tab-pane v-for="(item, index) in tabsData" :key="index" :label="item.label">
        <div class="btns1-box">
          <span v-for="(opt, optIndex) in item.btns1" :key="optIndex" :class="opt.class" @click="doClick(opt)">{{opt.label}}</span>
        </div>
        <div class="btns2-box">
          <div v-for="(opt, optIndex) in item.btns2" :key="optIndex" @click="doClick(opt)">
            <span :class="opt.icon"></span>
            <p>{{opt.label}}</p>
          </div>
        </div>
        <div class="btns3-box">
          <div v-for="(opt, optIndex) in item.btns3" :key="optIndex" @click="doClick(opt)">
            <span :class="opt.icon"></span>
            <p>{{opt.label}}</p>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      tabsData:[
        {
          label:'我是买家',
          btns1:[
            {label:'我的求购',class:"hover",router:""},
            {label:'我的订单',class:"hover",router:""},
            {label:'自营订单',class:"hover",router:""}
          ],
          btns2:[
            {icon:"iconfont icon-qiugou",label:"发布求购"},
            {icon:"iconfont icon-jiantou",label:""},
            {icon:"iconfont icon-baojia2",label:"卖家报价"},
            {icon:"iconfont icon-jiantou",label:""},
            {icon:"iconfont icon-duigou",label:"提交订单"}
          ],
          btns3:[
            {icon:"iconfont icon-qiu",label:"去求购"},
            {icon:"iconfont icon-zhaohuo-tianchong",label:"找现货"},
            {icon:"iconfont icon-changfang1",label:"找厂家"},
            {icon:"iconfont icon-che",label:"查物流"},
            {icon:"iconfont icon-zixun",label:"看资讯"},
            {icon:"iconfont icon-qianbao",label:"用白条"},
          ]
        },{
          label:'我是卖家',
          btns1:[
            {label:'我的报价',class:"hover",router:""},
            {label:'我的订单',class:"hover",router:""},
            {label:'商品管理',class:"hover",router:""}
          ],
          btns2:[
            {icon:"iconfont icon-qiugou",label:"发布求购"},
            {icon:"iconfont icon-jiantou",label:""},
            {icon:"iconfont icon-baojia2",label:"卖家报价"},
            {icon:"iconfont icon-jiantou",label:""},
            {icon:"iconfont icon-duigou",label:"提交订单"}
          ],
          btns3:[
            {icon:"iconfont icon-baojia1",label:"去报价"},
            {icon:"iconfont icon-zhaohuo-tianchong",label:"看商品"},
            {icon:"iconfont icon-dingdan",label:"查订单"},
            {icon:"iconfont icon-che",label:"查物流"},
            {icon:"iconfont icon-zixun",label:"看资讯"},
            {icon:"iconfont icon-qianbao",label:"用白条"},
          ]
        }
      ]
    };
  },
  methods: {
    /**
     * @name 执行点击
     */
    doClick(item){
      if(item.click){
        item.click();
        return
      };
      if(item.router)this.$router.push(item.router)
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.user-tabs {
  font-size: 12px;

  .btns1-box{
    margin: 10px;
    display: flex;
    justify-content: space-between;

    span{
      line-height: 25px;
      text-align: center;
      display: inline-block;
      width: 70px;
      background-color: #fceede;
      color: #FF6600;
    }
  }
  .btns2-box{
    margin:15px;
    display: flex;
    text-align: center;
    justify-content: space-between;
    color: #999;

    .iconfont{
      font-size: 25px;
    }
    p{
      margin-top: 8px;
    }
  }
  .btns3-box{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;

    >div{
      width: calc(100% / 3);
      box-sizing: border-box;
      text-align: center;
      padding: 10px;
      border-top: 1px solid #ddd;
      border-right: 1px solid #ddd;
    }
    >div:nth-child(3n+3){
      border-right: none;
    }
    .iconfont{
      font-size: 25px;
      color: $blue;
    }
    p{
      margin-top: 5px;
    }
  }
}
</style>